﻿@using STF.Blog.WebApp.Models.Article
@model ArticleViewModel
@{
    
    var reply = (Dictionary<int,List<ReplyViewModel>>)ViewBag.replyList;
    var comment = (List<CommentViewModel>)ViewBag.CommentList;
    int i = 1;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Article</title>
    <link rel="stylesheet" href="~/Web/css/article.css" />
</head>
<body>

    <div class="container-lg">
        <div class="row block">
            <a href="javascript:void(0);" id="column">这里是选中的分区</a>
            <a href="javascript:void(0);" class="block-tag" id="Cg-Tag">这里是选中的话题</a>
        </div>

        <div class="row aritcle-title">
            <h1>@Model.Title</h1>
            <div class="row block-context">
                <div class="col-md-1 block-users">
                    <a href="#">
                        <img src="~/Web/Image/@Model.UserPhoto" alt="">
                    </a>
                </div>

                <div class="col-md-9 user-info">
                    <div>
                        @Model.UserTitle
                        @*这里是用户的名字*@
                    </div>
                    <div>
                        这个用户很懒，什么都没有留下~
                    </div>
                </div>

                <div class="col-md-2 user-live">
                    <a href="">
                        <img src="~/Web/Image/userLive.png" alt="">
                    </a>
                </div>
            </div>

            <div class="row Comment-Context">
                <div>
                    @Html.Raw(Model.Context)
                </div>

                <div class="button-block">
                    <div class="button-row">
                        <div class="button-like">
                            <a href="javascript:void(0);" class="@Model.Id" id="false" onclick="ArticleLikeOrTrample('ArticleLT_@Model.Id')">
                                <img src="~/Web/Image/tool-button-like.png" alt="">
                                <span>@Model.Like</span>
                            </a>
                        </div>
                        <!-- <div class="botton-trample">
                            <span>踩</span>
                        </div> -->
                    </div>

                    <div class="button-row">
                        <div class="button-data">
                            <span>@Model.PublishTime</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row comment-title">
                <div class="col-md-1 comment-img">
                    <div>
                        <img src="~/Web/Image/Comment.png" alt="">
                    </div>
                </div>

                <div class="col-md comment-name">
                    <div>
                        评论
                    </div>
                </div>
            </div>

            <div class="row comment">
                <!-- 这里是文章的评论 -->
                @foreach(var com in comment)
                {
                    <div class="col-lg-12 comment-item">
                        <div class="row comment-userInfo">
                            <div class="col-lg-1 userInfo-image">
                                <a>
                                    <img src="~/Web/Image/@com.UserPhoto" alt="">
                                </a>
                            </div>

                            <div class="col-lg-10 userInfo-nickName">
                                <div>@com.UserName</div>
                                <div>这个人很懒，什么都没有留下~</div>
                            </div>

                            <div class="col-lg-1 userInfo-floor">@(i++) #</div>
                        </div>

                        <div class=" row comment-article">
                            <div class="col-lg-12">
                                @com.Content
                            </div>
                        </div>

                        <div class="row comment-buttonInfo">
                            <div class="col-lg-12">
                                <div class="buttonInfo-LikeOrReply">
                                    <!-- 这里是点赞与回复 -->
                                    <div class="buttonInfo-Like">
                                        <a href="javascript:void(0);" class="@com.Id" id="false" onclick="CommentLike('Comment_@com.Id')">
                                            <img src="~/Web/Image/tool-button-like.png" alt="">
                                            <span>@com.LikeSum</span>
                                        </a>
                                    </div>

                                    <div class="buttonInfo-Reply">
                                        <a href="javascript:void(0);" onclick="CtReply('CtReply_@com.Id')">
                                            <img src="~/Web/Image/tool-button-reply.png" alt="">
                                            <span>回复</span>
                                        </a>
                                    </div>
                                </div>

                                <div class="buttonInfo-date">
                                    @com.CreateTime
                                </div>
                            </div>
                        </div>

                        <div class="row buttonInfo-replyBox" id="CtReply_@com.Id" style="display: none;"></div>
                    
                        <div class="row comment-reply">
                            <!-- 这里是回复功能框 -->
                                @foreach(var re in reply[com.Id])
                                {
                                    <div class="col-lg-12">
                            <div class="reply-item">
                                <div class="reply-userOrReplyUser">
                                    <!-- 这里是回复的用户信息 -->
                                    <div class="reply-image">
                                        <a href="#">
                                            <img src="~/Web/Image/Comment.png"></img>
                                        </a>
                                    </div>

                                    <div class="reply-userName">
                                        <span>@re.UserName</span>
                                    </div>

                                    <div class="reply-backImage"></div>

                                    <div class="reply-notReplyUserName">
                                        <span>@re.ParentUser</span>
                                    </div>

                                    <div class="reply-replyDate">
                                        <span>@re.CreateTime</span>
                                    </div>
                                </div>

                                <div class="row reply-article">
                                    <div class="col-lg-12">
                                        <span>@re.Content</span>
                                    </div>
                                </div>

                                <div class="row reply-buttonInfo">
                                    <div class="col-lg-12">
                                        <div class="buttonInfo-reply-LikeOrReply">

                                            <div class="buttonInfo-reply-Like">
                                                <!-- 点赞 -->
                                                <a href="javascript:void(0);" class="@re.Id" id="false" onclick="ReplyLike('RLike_@re.Id')">
                                                    <img src="~/Web/Image/tool-button-like.png" alt="">
                                                    <span>@re.LikeSum 点赞</span>
                                                </a>
                                            </div>

                                            <div class="buttonInfo-reply-reply">
                                                <!-- 回复 -->
                                                <a href="javascript:void(0);" onclick="reply('reply_@re.Id')" id="reply">
                                                    <img src="~/Web/Image/tool-button-reply.png" alt="">
                                                    <span>回复</span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row buttonInfo-replyBox" id="reply_@re.Id" style="display: none;"></div>

                            </div>
                        </div>
                                }
                        </div>
                    </div>
                }
            </div>

            <div class="row comment-cmt">
                <div class="col-md-1 UserComment-img">
                    <img src="~/Web/Image/UserDefaultHead.png" alt="">
                </div>
                <div class="col-md-9 UserComment-input">
                    <input type="text" name="" id="cin" placeholder="请发表有价值的评论，文章评论不允许灌水，良好的社区氛围需要大家一起维护">
                </div>
                <div class="col-md-2 UserComment-button">
                    <button type="submit" id="comment-create">评论</button>
                </div> 
            </div>
        </div>
    </div>

@section Scripts{
    <script>

        $(function(){
            $.get("../../Home/GetArticleColumn",{aId:@Model.Id},function(data)
            {
                let str = ""+ data +"";
                $("#column").text(str);
                console.log(data);
            });
        });

        function reply(formId)
        {
            var rp = "#" + formId;
                console.log(rp);
                $(rp).toggle(500, function() {
                    let str = "<div class='row'>";
                    str += "<input type='text' name='content' id='reply-content'>";
                    str += "<button type='submit' id='reply-cmp'>发布</button>";
                    str += "</div>";
                $(rp).html(str);

                $("#reply-cmp").click(function()
                {
                    let ReplyId = rp.substr(7);
                    let reply = $("#reply-content").val();
                    console.log(ReplyId);
                    console.log(reply);

                    $.get("../../Home/AddReplyParent",{content:reply,id:ReplyId},function(data)
                    {
                        if(data == "true")
                            location.href="../../Home/Article/"+ @Model.Id +"";

                    },"json");
                });
            });
        }

        function CtReply(formId)
        {
            var rp = "#" + formId;
                console.log(rp);
                $(rp).toggle(500, function() {
                    let str = "<div class='row'>";
                    str += "<input type='text' name='content' id='cmt-content'>";
                    str += "<button type='submit' id='cmt-reply'>发布</button>";
                    str += "</div>";
                $(rp).html(str);

                $("#cmt-reply").click(function()
                {
                    let CommentReplyId = rp.substr(9);
                    let cont = $("#cmt-content").val();
                    //console.log(CommentReplyId);
                    //console.log(cont);
                    $.get("../../Home/AddCommentRep",{content:cont,id:CommentReplyId},function(data)
                    {
                        if(data == "true")
                            location.href="../../Home/Article/"+ @Model.Id +"";

                    },"json");
                });
            });
        }

        function ArticleLikeOrTrample(ArticleLt)
        {
            var articleId = ArticleLt.substr(10);
            //console.log(article);
            var articleClass = $("." + articleId).attr("id");
            if(articleClass == "false")
            {
                $.post("../../Home/ArticleLike",{LikeSumId:articleId},function(data)
                {
                    let str = "<img src='../../Web/Image/tool-button-like.png' alt=''>"
                    str += "<span>"+ data.like +"</span>";
                    $("." + articleId).html(str);
                    $("." + articleId).attr("id","true");
                },"json");
            }
            else
            {
                $.post("../../Home/ArticleTrample",{TrampleId:articleId},function(data)
                {
                    let str = "<img src='../../Web/Image/tool-button-like.png' alt=''>"
                    str += "<span>"+ data.like +"</span>";
                    $("." + articleId).html(str);
                    $("." + articleId).attr("id","false");
                },"json");
            }
        }

        function CommentLike(commentLike)
        {
            var clike = "#" + commentLike;
            var cLikeId = clike.substr(9);
            console.log(cLikeId);

            var ComClass =  $("." + cLikeId).attr("id");

            if(ComClass == "false")
            {
                var comClass = cLikeId;
                $.get("../../Home/CommentLike",{CommentLikeId:cLikeId},function(data)
                {
                    let str = "<img src='../../Web/Image/tool-button-like.png' alt=''>"
                    str += "<span>"+ data.like +"</span>";
                    $("." + comClass).html(str);
                    $("." + comClass).attr("id","true");
                },"json");
            }
            else
            {
                var comClass = cLikeId;
                $.get("../../Home/CommentTrample",{CommentTrampleId:cLikeId},function(data)
                {
                    let str = "<img src='../../Web/Image/tool-button-like.png' alt=''>"
                    str += "<span>"+ data.likeSum + "</span>";
                    $("." + comClass).html(str);
                    $("." + comClass).attr("id","false");
                },"json");
            }
        }

        function ReplyLike(rLike)
        {
            var rlike = "#" + rLike;
            var rLikeId = rlike.substr(7);
            console.log(rLikeId);

            var a = $("." + rLikeId).attr("id");
            //console.log(a);

            if(a == "false")
            {
                var asd = rLikeId;
                //console.log(asd);
                $.get("../../Home/ReplyLike",{replyLikeId:rLikeId},function(data)
                {
                    //console.log(data);
                    let str = "<img src='../../Web/Image/tool-button-like.png' alt=''>";
                    str += "<span>"+ data.likeSum +"</span>";
                    $("."+asd).html(str);
                    $("."+asd).attr("id","true");

                },"json");
            }
            else
            {
                var asd = rLikeId;

                $.get("../../Home/ReplyTrample",{replyTrampleId:rLikeId},function(data)
                {
                    //console.log(data);
                    let str = "<img src='../../Web/Image/tool-button-like.png' alt=''>";
                    str += "<span>"+ data.likeSum +"</span>";
                    $("."+asd).html(str);
                    $("."+asd).attr("id","false");

                },"json");
            }
        }
        
        $("#comment-create").click(function(data)
        {
            let Content = $("#cin").val();
            let ArticleId = @Model.Id;
            console.log(ArticleId);
            $.get("../../Home/AddComment",{content:Content,articleId:ArticleId},function(data)
            {
                if(data == "true")
                    location.href="../../Home/Article/"+ @Model.Id +"";
            },"json");
        });

    </script>
}

</body>
</html>
